<template>
	<view class="">
		<view class="page" v-if="!isTest">
			<view class="pageheader">
				<!-- #ifdef APP-PLUS -->
				<view class="status_bar">

				</view>
				<!-- #endif -->
				<!-- <uni-nav-bar title="导航栏组件"></uni-nav-bar> -->
				<view class="nav-bar">
					<view class="" style="flex: 1;">

					</view>
					<view class="my" style="flex: 1;">
						我的收益
					</view>
					<view class="yz" style="flex: 1;">
						<!-- 预支分润 -->
					</view>
				</view>
				<view class="number-box">
					<view class="number-box-title">
						<view class="number">
							{{number.parsePrice(infodata.yqsy)}}
						</view>
						<view class="yz" @click="yzfr">
							预支分润
						</view>
					</view>
					<view class="number-remake">
						预期收益
					</view>
				</view>
				<view class="headmenu">
					<view class="headmenu-box">
						<view class="agent_list">
							<view class="device-item" v-for="(item,index) in List" @click="toChild(item.type)"
								v-if=" item.type !== 'wdqb' && isTest">
								<image :src="item.img" mode=""></image>
								<view class="device-item-text">
									{{item.text}}
								</view>
							</view>

							<view class="device-item" v-for="(item,index) in List" @click="toChild(item.type)"
								v-if="!isTest">
								<image :src="item.img" mode=""></image>
								<view class="device-item-text">
									{{item.text}}
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="income-fangxin" @click="toFX" v-if="!isTest">
				<view class="income-fangxin-left">
					<image src="/static/img/income/empty-wallet@2x.png" mode=""></image>
					<text>返现奖励</text>
				</view>
				<view class="income-fangxin-right">
					<text> {{number.parsePrice(infodata.backAwardAmt)}}</text>
					<image src="/static/img/index/ic_next_black.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="income-fangxin" v-if="isTest">

			</view>
			<view class="FORX-BOX">
				<!-- <view class="item" v-for="(item,index) in storeList" @click="toFBChild(item.type)"  v-if=" item.type !== 'ptfh' && isTest">
					<view class="item-title">
						<view class="item-title-left">
							<image :src="item.img" mode=""></image>
							<text>{{item.text}}</text>
						</view>
						<view class="item-title-right">
							<text></text>
							<image src="/static/img/index/ic_next_black.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item-concent" v-if="item.type == 'ptfh'">
						<view class="item-concent-text">
							分红资格
						</view>
						<view class="fenhongzige">
							{{infodata.bonusAmt.fhName}}
						</view>
					</view>
					<view class="item-concent" v-else>
						<view class="item-concent-text">
							交易额（元） 
						</view>
						<view class="item-concent-righttext">
							{{number.parsePrice(qfJYamt(item.type))}}
						</view>
					</view>
					<view class="item-concent" v-if="item.type == 'ptfh'">
						<view class="item-concent-text">
							我的分红（元）
						</view>
						<view class="item-concent-righttext">
							{{number.parsePrice(infodata.bonusAmt.amt)}}
								
						</view>
					</view>
					<view class="item-concent" v-else>
						<view class="item-concent-text">
							收益（元）
						</view>
						<view class="item-concent-righttext">
								{{number.parsePrice(qfSYamt(item.type))}}
						</view>
					</view>
				</view> -->


				<view class="item" v-for="(item,index) in storeList" @click="toFBChild(item.type)">
					<view class="item-title">
						<view class="item-title-left">
							<image :src="item.img" mode=""></image>
							<text>{{item.text}}</text>
						</view>
						<view class="item-title-right">
							<text></text>
							<image src="/static/img/index/ic_next_black.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item-concent" v-if="item.type == 'ptfh'">
						<view class="item-concent-text">
							分红资格
						</view>
						<view class="fenhongzige">
							{{infodata.bonusAmt.fhName}}
						</view>
					</view>
					<view class="item-concent" v-else>
						<view class="item-concent-text">
							交易额（元）
						</view>
						<view class="item-concent-righttext">
							{{number.parsePrice(qfJYamt(item.type))}}
						</view>
					</view>
					<view class="item-concent" v-if="item.type == 'ptfh'">
						<view class="item-concent-text">
							我的分红（元）
						</view>
						<view class="item-concent-righttext">
							{{number.parsePrice(infodata.bonusAmt.amt)}}

						</view>
					</view>
					<view class="item-concent" v-else>
						<view class="item-concent-text">
							收益（元）
						</view>
						<view class="item-concent-righttext">
							{{number.parsePrice(qfSYamt(item.type))}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="notice-center" v-else>
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar">
			
			</view>
			<!-- #endif -->
		  <view class="each-line" @tap="toNoticesList('官方公告')">
		    <view class="label">
		      <image class="icon" name="backImg" src="/static/img/my/icon-system-notice.png"></image>
		      <text>官方公告</text>
		    </view>
		    <uni-icons type="right" size="16"></uni-icons>
		  </view>
		  <view class="each-line" @tap="toNoticesList('系统消息')">
		    <view class="label">
		      <image class="icon" name="backImg" src="/static/img/my/icon-system-message.png"></image>
		      <text>系统消息</text>
		    </view>
		    <uni-icons type="right" size="16"></uni-icons>
		  </view>
		</view>
	</view>

</template>

<script>
	import number from '../../utils/number.js'
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		data() {
			return {
				isTest: null,
				number: number, //声明number属性并赋值为引入的number模块
				List: [{
						img: "/static/img/income/jzmx.png",
						text: '进账明细',
						type: 'jzmx'
					},
					{
						img: "/static/img/income/jsmx.png",
						text: '提现明细',

						type: 'txmx'
					},
					{
						img: "/static/img/income/syjs.png",
						text: '我的钱包',

						type: 'wdqb'
					},
					{
						img: "/static/img/income/lssy.png",
						text: '历史收益',

						type: 'lssy'
					},
				],
				startDeta: '开始时间',
				endDetaL: '结束时间',
				storeList: [{
						img: "/static/img/income/chart-square@2x.png",
						text: '直营奖励',
						type: 'zyjl'
					},
					{
						img: "/static/img/income/ticket-2@2x.png",
						text: '团队奖励',
						type: 'tdjl'
					},
					{
						img: "/static/img/income/money-add@2x.png",
						text: '直营补贴',
						type: 'zybt'
					},
					{
						img: "/static/img/income/wallet-2@2x.png",
						text: '平台分红',
						type: 'ptfh'
					},
				],
				type: '0',
				dataOBJ: {
					jihuo: '',
					totalNum: '',
					weijihuo: '',
				},
				teamdata: {},
				usrdata: {},
				infodata: {},
				UserInfo: {}
			}
		},
		onLoad(o) {


		},
		onShow() {
			this.isTest = uni.getStorageSync('isTest')
			if (this.isTest) {
				uni.setTabBarItem({
					index: 2,
					text: "消息"
				});
			}
			this.getsyinfo();
			this.getUserInfo();
		},
		methods: {
			toNoticesList(type) {
					uni.navigateTo({
						url: '/pages/notice/noticesList?type=' + type
					})
				},
			yzfr() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			},
			async getUserInfo() {
				const res = await util.request(
					api.getUserInfoUrl, {

					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.UserInfo = res.data

				}
			},
			toFX() {
				uni.navigateTo({
					url: '/pages/incomeChiled/backAwardList'
				})
			},

			qfJYamt(item) {
				if (item == 'zyjl') {
					return this.infodata.zyAwardAmt.tradeAmt
				} else if (item == 'tdjl') {
					return this.infodata.tdAwardAmt.tradeAmt
				} else if (item == 'zybt') {
					return this.infodata.zyBtAmt.tradeAmt
				}
			},
			qfSYamt(item) {
				if (item == 'zyjl') {
					return this.infodata.zyAwardAmt.amt
				} else if (item == 'tdjl') {
					return this.infodata.tdAwardAmt.amt
				} else if (item == 'zybt') {
					return this.infodata.zyBtAmt.amt
				}
			},
			toChild(t) {
				if (t == 'jzmx') {
					uni.navigateTo({
						url: '/pages/incomeChiled/incomeList'
					})
				} else if (t == 'txmx') {
					uni.navigateTo({
						url: '/pages/incomeChiled/txList'
					})
				} else if (t == 'lssy') {
					uni.navigateTo({
						url: '/pages/incomeChiled/historyList?id =' + this.UserInfo.user.id
					})
				} else if (t == 'wdqb') {
					uni.navigateTo({
						url: '/pages/incomeChiled/qianbao'
					})
				}


			},
			toFBChild(t) {
				if (t == 'zyjl') {
					uni.navigateTo({
						url: '/pages/incomeChiled/zyAwardList'
					})
				} else if (t == 'tdjl') {
					uni.navigateTo({
						url: '/pages/incomeChiled/tdAwardList'
					})
				} else if (t == 'zybt') {
					uni.navigateTo({
						url: '/pages/incomeChiled/zyBtList'
					})
				} else if (t == 'ptfh') {
					uni.setStorageSync('bonusAmtlist', this.infodata.bonusAmt.list)
					uni.navigateTo({
						url: '/pages/incomeChiled/ptFenhong'
					})
				}

			},
			async getsyinfo() {
				const res = await util.request(
					api.syinfoUrl, {},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.infodata = res.data
				}
			},
		}
	}
</script>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F2F2F7;
	}

	.pageheader {
		height: 240px;
		flex-shrink: 0;
		// background:linear-gradient(180deg, #3387FE 0%, #66CBFE 100%);

		background-image: url('../../static/img/index/icbg.png');
		background-size: 100% 100%;
		// fill: 
	}

	.nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// font-weight: 600;
		padding: 0 15px;
		color: #ffffff;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 16px;
		font-style: normal;

		.my {

			font-weight: 600;
			// line-height: 24px;
		}



		// border-top: solid 1px #333;
	}

	.number-box {
		margin-top: 25px;
		margin-left: 12px;
		margin-right: 12px;
	}

	.yz {
		text-align: right;
		color: #ffffff;

		font-size: 14px;
	}

	.number {

		color: #ffffff;
		font-family: "Altinn-DIN Exp";
		font-size: 32px;
		font-style: normal;
		font-weight: DINExp-Bold;
		line-height: 40px;
	}

	.number-box-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.number-remake {
		color: #ffffffa6;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
	}

	.headmenu {
		height: 100px;
		position: relative;

		.headmenu-box {

			position: absolute;
			left: 24rpx;
			right: 32rpx;
			bottom: -50%;
			display: flex;
			// margin-left: 20px;
			// margin-right: 20px;
			// padding: 16px 12px;
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
			border-radius: 8px;
			border: 1px solid #FFF;
			background: #FFF;
			// height: 100px;
		}
	}

	.agent_list {
		display: flex;
		align-items: center;
		// padding: 30rpx 0;

		width: 100%;
	}

	.device-item {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		// justify-content: space-between;
		background: #fff;
		padding: 16px;
		border-radius: 10px;

		image {
			width: 40px;
			height: 40px;
		}

		.device-item-text {
			color: #414960;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px;
		}
	}

	.income-fangxin {
		margin-top: 80px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 12px;
		margin-right: 12px;
		padding: 12px 16px;
		border-radius: 8px;
		background: #FFF;
	}

	.income-fangxin-left {
		display: flex;
		align-items: center;
		color: #171b25;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;

		// line-height: 22px;
		image {
			width: 24px;
			height: 24px;
			margin-right: 8px;
		}
	}

	.income-fangxin-right {
		display: flex;
		align-items: center;
		color: #171b25;
		font-family: "Altinn-DIN Exp";
		font-size: 16px;
		font-style: normal;
		font-weight: DINExp-Bold;
		line-height: 24px;

		image {
			width: 6px;
			height: 16px;
			margin-left: 8px;
		}
	}

	.FORX-BOX {
		margin-top: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 12px;
		margin-right: 12px;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.item {
		width: 48%;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		background: #fff;
		padding: 12px 16px;
		border-radius: 8px;
		background: #FFF;
		margin-bottom: 10px;

		.item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 12px;
			border-bottom: 0.5px solid var(--Color-Fill-Fill-3, #E5E6EB);

			.item-title-left {
				display: flex;
				align-items: center;
				color: #171b25;
				font-family: "PingFang SC";
				font-size: 14px;
				font-style: normal;
				font-weight: 600;
				line-height: 22px;

				image {
					width: 24px;
					height: 24px;
					margin-right: 8px;
				}
			}

			.item-title-right {
				image {
					width: 6px;
					height: 16px;
					margin-left: 8px;
				}
			}

		}

		.item-concent {
			margin-top: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.item-concent-text {
			color: #61687c;
			font-family: "PingFang SC";
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px;
		}

		.item-concent-righttext {
			color: #171b25;
			font-family: "Altinn-DIN Exp";
			font-size: 12px;
			font-style: normal;
			line-height: 20px;
			font-weight: 600;
		}
	}

	.fenhongzige {
		display: flex;
		padding: 0 8px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border-radius: 4px;
		border: 1px solid var(--Color-Brand-Normal, #165DFF);
		background: var(--color-brand-10, #E8EFFF);
		color: #165dff;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
	}
	.notice-center {
	  .each-line {
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    border-bottom: 1px solid #e5e5e5;
	    padding: 20rpx;
	
	    .label {
	    display: flex;
	    align-items: center;
				.icon {
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}
	    }
	  }
	}
</style>